<template>
    <div class="wrap" h-342px flex items-center px-13>
        <img
            class="photo"
            w-179px
            h-251px
            alt="me"
            border-rounded-5
            src="photo.jpg"
            mr-27
        />
        <div line-height-loose>
            <p class="name" font-ZC>👋宁家麟</p>
            <div class="text">
                <div class="row">
                    <i class="label">
                        <span class="i-material-symbols-phone-iphone" />
                        Tel&WeChat:
                    </i>
                    <span decoration-underline decoration-dashed
                        >18768125069</span
                    >
                </div>
                <div class="row">
                    <i class="label">
                        <span class="i-material-symbols-mail-rounded"></span>
                        Email:
                    </i>
                    <span decoration-underline decoration-dashed
                        >macKiter@163.com</span
                    >
                </div>
                <div class="row">
                    <i class="label"
                        ><span
                            class="i-material-symbols-laptop-mac-outline"
                        ></span>
                        Title:</i
                    >
                    高级前端开发工程师
                </div>
                <div class="row">
                    <i class="label">
                        <span class="i-material-symbols-school"></span>
                        University:
                    </i>
                    杭州电子科技大学(本科)
                </div>
                <div class="row">
                    <i class="label">
                        <span class="i-material-symbols-category"></span>
                        Major:
                    </i>
                    数字媒体技术
                </div>
                <div class="row">
                    <i class="label">IP:</i>
                    浙江杭州
                    <i class="label" ml-3>FROM:</i>
                    陕西渭南
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="less" scoped>
.wrap {
    background: linear-gradient(
        180deg,
        rgba(213, 222, 231, 1) 0%,
        rgba(232, 235, 242, 1) 50%,
        rgba(226, 231, 237, 1) 100%
    );
    box-shadow: 0px 2px 6px 2px rgba(179, 179, 179, 0.26);
}
.name {
    font-size: 37px;
    font-weight: 500;
}
.text {
    font-size: 15px;
}
.row {
    display: flex;
    align-items: center;
    letter-spacing: 2px;
    .label {
        display: flex;
        align-items: center;
        color: #9b9b9b;
        margin-right: 5px;
    }
}
</style>
